<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保姆预订系统 - 用户注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 500px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            text-align: center;
            padding: 25px 20px;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .header p {
            font-size: 14px;
            opacity: 0.9;
        }

        .form-container {
            padding: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s;
        }

        .form-group input:focus, .form-group select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .role-option {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            margin-top: 8px;
        }

        .role-option label {
            flex: 1;
            padding: 14px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .role-option input[type="radio"] {
            display: none;
        }

        .role-option input[type="radio"]:checked + label {
            background-color: #3498db;
            color: white;
        }

        .role-option label:hover {
            background-color: #f0f7fd;
        }

        .btn-register {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 14px;
            width: 100%;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-top: 15px;
        }

        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-register:active {
            transform: translateY(0);
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }

        .login-link a {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            padding: 15px;
            font-size: 12px;
            color: #999;
            border-top: 1px solid #eee;
        }

        .error-message {
            color: #e74c3c;
            background-color: #feeceb;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            text-align: center;
            display: none;
        }

        .form-hint {
            font-size: 12px;
            color: #888;
            margin-top: 5px;
        }

        .conditional-field {
            display: none;
        }

        @media (max-width: 480px) {
            .container {
                border-radius: 0;
                box-shadow: none;
            }

            body {
                padding: 0;
                background: white;
            }

            .role-option {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>保姆预订系统</h1>
            <p>欢迎注册，开启您的便捷家政服务</p>
        </div>

        <div class="form-container">
            <div class="error-message" id="errorMessage">
                <% if (request.getParameter("error") != null) { %>
                    <%= request.getParameter("error") %>
                <% } %>
            </div>

            <form action="register" method="POST" id="registerForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请设置登录用户名" required>
                    <p class="form-hint">4-20个字符，可使用字母、数字和下划线</p>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="设置登录密码" required>
                    <p class="form-hint">至少6位，包含字母和数字</p>
                </div>

                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                </div>

                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
                    <p class="form-hint">请输入11位有效手机号码</p>
                </div>

                <div class="form-group">
                    <label for="realname">真实姓名</label>
                    <input type="text" id="realname" name="realname" placeholder="请输入真实姓名" required>
                </div>

                <div class="form-group">
                    <label for="address">联系地址</label>
                    <input type="text" id="address" name="address" placeholder="请输入详细地址" required>
                    <p class="form-hint">街道门牌号等详细地址信息</极速p>
                </div>

                <div class="form-group">
                    <label>用户类型</label>
                    <p class="form-hint">请选择您的身份类型</p>
                    <div class="role-option">
                        <input type="radio" name="role" id="roleEmployer" value="0" required>
                        <label for="roleEmployer">雇主（需要找保姆）</label>

                        <input type="radio" name="role" id="roleNanny" value="1" required>
                        <label for="roleNanny">保姆（提供服务）</label>
                    </div>
                </div>

                <!-- 新增的期望薪资字段 - 仅当选择保姆角色时显示 -->
                <div class="form-group conditional-field" id="priceField">
                    <label for="b_price">期望薪资 (元/月)</label>
                    <input type="number" id="b_price" name="b_price" placeholder="请输入期望薪资" min="3000" max="20000">
                    <p class="form-hint">请输入您的期望月薪</p>
                </div>

                <button type="submit" class="btn-register">立即注册</button>
            </form>

            <div class="login-link">
                已有账号？<a href="login.jsp">立即登录</a>
            </div>
        </div>

        <div class="footer">
            © 2025 保姆预订系统 | 提供专业的家政服务解决方案
        </div>
    </div>

    <script>
        // 当页面加载完成时
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registerForm');
            const errorMessage = document.getElementById('errorMessage');
            const roleEmployer = document.getElementById('roleEmployer');
            const roleNanny = document.getElementById('roleNanny');
            const priceField = document.getElementById('priceField');
            const bPriceInput = document.getElementById('b_price');

            // 检查URL中是否有错误参数
            const urlParams = new URLSearchParams(window.location.search);
            const errorParam = urlParams.get('error');

            if (errorParam) {
                errorMessage.textContent = decodeURIComponent(errorParam);
                errorMessage.style.display = 'block';
            }

            // 根据角色选择显示/隐藏薪资字段
            function togglePriceField() {
                if (roleNanny.checked) {
                    priceField.style.display = 'block';
                    bPriceInput.setAttribute('required', 'required');
                } else {
                    priceField.style.display = 'none';
                    bPriceInput.removeAttribute('required');
                }
            }

            roleEmployer.addEventListener('change', togglePriceField);
            roleNanny.addEventListener('change', togglePriceField);

            // 表单提交验证
            form.addEventListener('submit', function(e) {
                // 清空之前的错误
                errorMessage.style.display = 'none';

                // 获取表单值
                const username = document.getElementById('username').value.trim();
                const password = document.getElementById('password').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                const phone = document.getElementById('phone').value.trim();
                const realname = document.getElementById('realname').value.trim();
                const address = document.getElementById('address').value.trim();
                const roleSelected = document.querySelector('input[name="role"]:checked');
                const b_price = document.getElementById('b_price').value;

                // 验证用户名
                if (username.length < 4 || username.length > 20) {
                    showError('用户名长度需在4-20个字符之间');
                    e.preventDefault();
                    return;
                }

                // 验证密码复杂度
                if (password.length < 6) {
                    showError('密码长度至少为6位');
                    e.preventDefault();
                    return;
                }

                if (!/[A-Za-z]/.test(password) || !/\d/.test(password)) {
                    show极速Error('密码必须包含字母和数字');
                    e.preventDefault();
                    return;
                }

                // 验证密码一致性
                if (password !== confirmPassword) {
                    showError('两次输入的密码不一致');
                    e.preventDefault();
                    return;
                }

                // 验证手机号码
                const phoneRegex = /^1[3-9]\d{9}$/;
                if (!phoneRegex.test(phone)) {
                    showError('请输入有效的手机号码');
                    e.preventDefault();
                    return;
                }

                // 验证真实姓名
                if (realname.length < 2) {
                    showError('真实姓名至少2个字符');
                    e.preventDefault();
                    return;
                }

                // 验证地址
                if (address.length < 5) {
                    showError('地址信息至少5个字符');
                    e.preventDefault();
                    return;
                }

                // 验证角色选择
                if (!roleSelected) {
                    showError('请选择用户类型');
                    e.preventDefault();
                    return;
                }

                // 如果是保姆角色，验证期望薪资
                if (roleSelected.value == 1) {
                    if (!b_price || b_price < 3000 || b_price > 20000) {
                        showError('请输入有效的期望薪资 (3000-20000元)');
                        e.preventDefault();
                        return;
                    }
                }

                // 所有验证通过
            });

            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.style.display = 'block';

                // 滚动到错误信息位置
                errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        });
    </script>
</body>
</html>